 <!-- 心愿单详情 -->
<template>
  <view>
    <view v-if="!hasLogin">
      <empty ></empty>
    </view>
    <view v-else>
      <view class="addTitle">
        <view class="titleDetail">
          <view class="" style="text-align:left">
            <image src="../../static/newh5/fanhui.png" class="yticon" style="width: 13px;height: 20px;color:black"
              @click="returnIndex()"></image>
          </view>
          <view class="titleText" style="flex:1">
            <b >心愿单详情</b>
          </view>
        </view>
      </view>
      <view class="main_box">
        <view>
          <text>{{ currentObj.title }}</text>
          <view class="grey_text MT10">
            发起人:{{ currentObj.name }}
          </view>
          <view class="grey_text MT10">
            发布时间:{{ currentObj.createTime }}
          </view>
          <view class="MT10 middle_box">
            <text class="left_title_text">许愿参与人数</text>
            <text class="right_title_text" @click="openDetail()">查看详情 > </text>
          </view>
          <view class="status-one MT10" style="position:relative">
            <view class="process-one" :style="{ width: staceNum + '%' }"></view>
            <view class="rightFix">{{ currentObj.userCount  }}/{{ currentObj.limit }}</view>
          </view>
          <view>
            <text class="grey_text">当参与人数满足要求时，将由运营人员发起商品寻源</text>
          </view>
          <!-- 详细信息部分 -->
          <view class="MT10 middle_box">
            <text class="left_title_text">心愿单信息</text>
          </view>
          <view class="MT10 middle_box">
            <text>心愿单编号：</text>
            <text>{{ currentObj.sn }} </text>
          </view>
          <view class="MT10 middle_box">
            <text>预计采购时间：</text>
            <text>{{ currentObj.endTime }} </text>
          </view>
          <view class="MT10 middle_box">
            <text>联系人姓名：</text>
            <text>{{ currentObj.name }} </text>
          </view>
          <view class="MT10 middle_box">
            <text>联系人电话：</text>
            <text>{{ currentObj.phone }} </text>
          </view>
          <view v-for='(item, index) in currentObj.details'>
            <view class="MT10 middle_box">
              <text class="left_title_text">商品信息{{ index + 1 }}</text>
            </view>
            <view class="MT10 middle_box">
              <text>商品名称：</text>
              <text>{{ item.goodsName }} </text>
            </view>
            <view class="MT10 middle_box">
              <text>商品说明：</text>
              <text>{{ item.remark }} </text>
            </view>
            <view class="MT10 middle_box">
              <text>所需数量：</text>
              <text>{{ item.num }} </text>
            </view>
            <view class="MT10 middle_box">
              <text>参考链接：</text>
              <text>{{ item.goodsUrl }} </text>
            </view>
          </view>
          <view class="MT10 middle_box">
            <text class="left_title_text">进度信息</text>
          </view>
          <u-table class="MT10">
            <u-tr class="u-tr">
              <u-th class="u-th" width="300rpx">时间</u-th>
              <u-th class="u-th">操作人</u-th>
              <u-th class="u-th" width="250rpx">操作明细</u-th>
            </u-tr>
            <u-tr class="u-tr" v-for="item in logData">
              <u-td class="u-td" width="300rpx">{{ item.createTime }}</u-td>
              <u-td class="u-td">{{ item.createUser }}</u-td>
              <u-td class="u-td" width="250rpx">{{ item.content }}</u-td>
            </u-tr>
          </u-table>
        </view>
      </view>
      <view class="fixed_box">
        <view class="uni-tip-group-button">
          <view class="btnFrame btn" @click="createwish">创建心愿单</view>
          <template v-if="type == '1'">
            <!-- 已完成/已上架/已加入置灰按钮 -->
              <view   style="margin-right: 5px;" @click="openDialog(currentObj)"  
                    :class="[(currentObj.status == '3'||currentObj.status == '7'||currentObj.isJoined)?'btnFrame btn_disabled':'btnFrame btn']" >
                    {{ currentObj.isJoined?'已加入许愿':'加入许愿' }} 
              </view>
            </template>
          <!-- <view class="btnFrame btn" v-if="type == '1'&&!currentObj.isJoined"  @click="() => { showPopup = true }">加入许愿</view>
          <view class="btnFrame btn_disabled" v-if="type == '1'&&currentObj.isJoined" >已加入许愿</view> -->
        </view>
      </view>
    </view>
    <u-popup border-radius="10" v-model="showPopup" @close="close" @open="open" mode="center" length="70%" :mask="true"
      :closeable="true" close-icon-pos="top-right">
      <view class="uni-tip" style="width: 100% !important;">
        <text class="uni-tip-title">加入提示</text>
        <view style="padding: 15px;">
          <text>确认加入该许愿池吗？当人数满足要求后，将由运营人员进行商品寻源，上架后您也可购买该商品</text>
        </view>
        <view class="uni-tip-group-button">
          <view class="btnFrame btn" @click="() => { showPopup = false }">取消</view>
          <view class="btnFrame btn" @click="enterWish()">确定加入</view>
        </view>
      </view>
    </u-popup>
    <u-modal v-model="showDetail" :show-title='false' :show-cancel-button="false" :show-confirm-button="false" >
      <view class="modal_title">
        <view>
          <text>已报名人数 <text style="color:#02A7F0;">{{currentObj.userCount}}/{{currentObj.limit}}</text>    </text>   
        </view>
        <view @click="()=>{showDetail = false}">
          &#10005;
        </view>        
      </view>
      <view class="table_box">
        <u-table>
          <u-tr>
            <u-th>序号</u-th>
            <u-th class="th_max">报名人姓名</u-th>
            <u-th class="th_max">联系方式</u-th>
          </u-tr>
          <template v-if="dialogData.records&&dialogData.records.length!=0">
            <u-tr v-for="(item,index) in dialogData.records" >
            <u-td>{{ index+1 }}</u-td>
            <u-td class="max_width">{{ item.userName?item.userName:'无' }}</u-td>
            <u-td class="max_width">{{ item.phone?item.phone:'无' }}</u-td>
          </u-tr>
          </template>
          <view v-else class="block_table">
            无数据
          </view>
        </u-table>
      </view>
     
      <view class="modal_bottom">
        <view style=" display: flex;color:#909090">
          
          <view @click="changePageObj('sub')" v-if="this.dialogPage.page!=1"  > 
            上一页
          </view>
          <view @click="changePageObj('add')" v-if="lastPage != this.dialogPage.page" >
            下一页
          </view>
          &#8195;
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
import {
  getLogByWishId,
  getWishDetail,
  enterWishList,
  pageWishListUser
} from '../../api/wish/wish'
import { goback } from "@/common/utils/navigateBack.js";
import {
  mapState,

} from 'vuex';
export default {
  name: 'wishContent',
  props: [],

  components: {},
  data() {
    return {
      showDetail:false,
      showPopup: false,
      //是否为心愿池跳转
      type:'0',
      logData:[],
      currentId: '',
      dialogData:{
        records:[],
        total:'0',
        size:'5'
      },
      dialogPage:{
        page:1,
        limit:5,
      },
      currentObj: {
        userCount: 0,
        limit: 100
      }
    };
  },

  filter: {},

  computed: {
    ...mapState(['hasLogin']),
    staceNum() {
      let returnData = (this.currentObj.userCount / this.currentObj.limit) * 100
      return Math.min(100,returnData)
    },
    lastPage(){
      const total = Number(this.dialogData.total) 
      const size = Number(this.dialogData.size) 
      return (total+size-1)/size
    },
  },

  created() { },

  mounted() { },
  onLoad() {
    this.currentId = this.$route.query.id
    this.type = this.$route.query.type
    console.log('currentId', this.currentId);
    this.loadData()
    this.getLodData()
  },
  watch: {},

  methods: {
    openDialog(currentObj){
      if((currentObj.status == '3'||currentObj.status == '7'||currentObj.isJoined)){
        return
      }
      this.showPopup = true
    },
    openDetail(){
      console.log('xxx',this.currentObj);
      this.getDialogData('fresh')
      this.showDetail = true
    },
    changePageObj(type='add'){
      if(type == 'add'){
        this.dialogPage.page = this.dialogPage.page+1
      }else{
        this.dialogPage.page = this.dialogPage.page-1
        if(this.dialogPage.page<=0){
          this.dialogPage.page = 1
        }
      }
      this.getDialogData('noFresh')
    },
    getDialogData(type = 'fresh'){
        if(type == 'fresh'){
          this.dialogPage.page = 1
        }
        const param = {
          ...this.dialogPage,
          wishListId:this.currentObj.id
        }
        pageWishListUser(param).then((res) => {
        if (res.code === 0) {
          console.log('res',res);
          this.dialogData = res.data
          // this.
        }
      })
      
    },
    createwish() {
      uni.navigateTo({
        url: `/pages/wishList/editWishContent`
      })
    },
    enterWish() {
      console.log('xx', this.currentRecord);
      let param = {
        id: this.currentObj.id
      }
      enterWishList(param).then((res) => {
        if (res.code === 0) {
          console.log('xxx');
          this.$util.msg('操作成功！')
          this.showPopup = false

        } else {
          this.showPopup = false
          this.$util.msg(res.message)
        }
      })
    },
    returnIndex() {
      goback()
    },
    loadData() {
      let params = {
        id: this.currentId
      }
      getWishDetail(params).then((res) => {
        console.log('res', res);
        if (res.code === 0) {
          console.log('res', res.data);
          this.currentObj = res.data
        } else {

        }
      })
    },
    getLodData() {
      let params = {
        id: this.currentId
      }
      getLogByWishId(params).then((res) => {
        console.log('res', res);
        if (res.code === 0) {
          console.log('res', res.data);
          this.logData = res.data
        } else {

        }
      })
    },
  }
}

</script>
<style lang='scss' scoped>
.main_box {
  padding: 10px;
}
.table_box{
  margin: 10px;
}
.block_table{
  text-align: center;
  padding: 10px;
}
.rightFix{
  position: absolute;
    right: 0;
    top: -3px;
}
.fixed_box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200rpx;
}

.grey_text {
  color: #aaaaaa;
  font-size: 26rpx;
}

.MT10 {
  margin-top: 20rpx;
}

.middle_box {
  display: flex;
  justify-content: space-between;

  .left_title_text {
    font-size: 16px;
    font-weight: 500;
  }

  .right_title_text {
    font-size: 14px;
    color: #aaaaaa;
  }
}

.btn {
  line-height: 34px;
  height: 34px;
  width: 160rpx;
  border-radius: 26rpx;
  border: 2rpx solid #e4e7ed;
  font-size: 26rpx;
  text-align: center;
  color: #82848a;
}
.btn_disabled {
  line-height: 34px;
  height: 34px;
  width: 160rpx;
  border-radius: 26rpx;
  border: 2rpx solid #e4e7ed;
  font-size: 26rpx;
  text-align: center;
  color: white;
  background: #e4e7ed;
}

.uni-tip-group-button {
  border-top: none;
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 20px;

  .uni-tip-button {
    border-top: 1px solid #e2e2e2;

    &.confirm {
      border-top: 1rpx solid $base-color;
      border-bottom: 1rpx solid $base-color;
      color: #fff;
      background-color: $base-color;
    }
  }
}

.status-one {
  width: 100%;
  border: 1px #e2e2e2 solid;
  // box-shadow: 0px 2px 2px #D0D4D6;
  height: 15px;
  border-radius: 10px;
  background: white; // 此时是最新的语法；
  padding: 1px;
  margin-bottom: 10px;

  .process-one {
    background: #e2e2e2;
    width: 10%;
    height: 100%;
    border-radius: 10px;
  }
}
.modal_title{
  display: flex;
  justify-content: space-between;
  padding: 10rpx ;
}
.modal_bottom{
  margin-top: 20rpx;
  padding: 20rpx;
  display: flex;
  flex-direction: row-reverse;
}
.th_max{
  width: 180upx;
}
.max_width{
						overflow: hidden; //超出的文本隐藏
						text-overflow: ellipsis; //溢出用省略号显示
						white-space: nowrap; // 默认不换行；
						width: 180upx;
						// margin-left: 10upx;
}
</style>